<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/waiter' }" style="font-size:24px">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/ordermanager'}" style="font-size:24px">业绩查询</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card style="font-size:24px  ;text-align:center" :data="options">
      <div >
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
                  v-model="value2"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions">
          </el-date-picker>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
        </div>

      </div>
    </el-card>

    <!--表单区域-->
    <el-table :data="orderList" border stripe height="600">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column label="订单编号" prop="order_number"></el-table-column>
      <el-table-column label="订单价格" prop="order_price"></el-table-column>s
      <el-table-column label="桌号" prop="table_number"></el-table-column>
      <el-table-column label="下单时间" prop="create_time"></el-table-column>


    </el-table>

    <!-- 订单列表 -->

  </div>
</template>

<script>
  import {requestData} from "../../ajax";
  export default {
    name: "Home",

    data:function() {
      return {
        orderList: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      }
    },
    mounted:function(){
      // 准备条件
      var request_data = new FormData();
      // 请求数据
      requestData("get","order.json", request_data).then((resp)=>{
        // 赋值数据到linesdata
        var result = resp.data;
        this.orderList = result["finished_order"];
      });

    },

    methods: {
      //退出
      signout() {
        this.$confirm("退出登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$router.push({ path: "/login.html" });
        });
      },

      //编辑订单信息
      async showEditDialog (id) {
        const { data: res } = await this.$http.get('users/' + id)
        if (res.meta.status !== 200) {
          return this.$message.error('查询用户信息失败！')
        }
        this.editUserForm = res.data
        this.editDialogVisible = true
      },
      // 监听修改用户对话框的关闭事件
      editDialogClosed () {
        this.$refs.editUserFormRef.resetFields()
      },


      // 删除订单
      async removeUserById (id) {
        const confirmResult = await this.$confirm(
                '此操作将永久删除该订单, 是否继续?',
                '提示',
                {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }
        ).catch(err => err)
        // 点击确定 返回值为：confirm
        // 点击取消 返回值为： cancel
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除订单')
        }
        const { data: res } = await this.$http.delete('users/' + id)
        if (res.meta.status !== 200) return this.$message.error('删除订单失败！')
        this.$message.success('删除订单成功！')
        this.getUserList()
      },
    },


  };
</script>
<style scoped>
  .el-table{
    color:rgb(134, 96, 46)
  }
  .el-breadcrumb{
    margin-bottom: 15px;
    font-size:15px;
  }
</style>

